import { init } from "snabbdom/build/package/init.js";
import { h } from "snabbdom/build/package/h.js";

// init函数的参数是一个数组,数组内是模块
// 返回值是 patch函数, 作用是对比两个VNode的差异更新到真实DOM
let patch = init([]);

// h函数接收两个参数
// 第一个参数: 标签+选选择器
// 第二个参数: 如果是字符串的话就是标签中的内容,如果是对象则是模块需要的数据
let vNode = h("div#container.cls", "Hello World");

// patch接收两个VNode,对比两个VNode,并返回一个VNode
// 第一个参数: 可以是DOM元素,patch函数内部会把DOM元素转换为VNode,也可以直接是VNode
// 第二个参数: VNode
let app = document.querySelector("#app");
let oldVNode = patch(app, vNode);

// 再创建一个新的vNode该VNode含有子元素的VNode
vNode = h("div", [h("h1", "Hello World"), h("p", "Hello P")]);

setTimeout(() => {
    // 再对比新的VNode和刚才返回的oldVNode
    patch(oldVNode, vNode);
    // 清空页面元素
    // patch(oldVNode, h('!'))
}, 2000);
